<template>
  <div>
    <div class="switcher" :style="{ left: switcherLeft + 'px' }">
      <el-radio-group v-model="seatStore.viewSelect" size="small">
        <el-radio-button value="TMA">终端扇区</el-radio-button>
        <el-radio-button value="ACC">区管扇区</el-radio-button>
        <!-- <el-radio-button value="TWR">塔台席位</el-radio-button> -->
        <!-- <el-radio-button value="SUP">带班席位</el-radio-button> -->
      </el-radio-group>
    </div>
    <TMA v-if="seatStore.viewSelect == 'TMA'" />
    <ACC v-if="seatStore.viewSelect == 'ACC'" />
    <!-- <TWR v-if="seatStore.viewSelect == 'TWR'" /> -->
    <!-- <SUP v-if="seatStore.viewSelect == 'SUP'" /> -->
  </div>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";

import TMA from "./TMA/index.vue";
import ACC from "./ACC/index.vue";
import TWR from "./TWR/index.vue";
import SUP from "./SUP/index.vue";

import useCommonStore from "@/store/common.js";
import useSeatStore from "@/store/seat.js";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const containerWidth = computed(
  () =>
    commonStore.clientWidth -
    (commonStore.showSidebar ? commonStore.sidebarWidth : 0) -
    500
);

const containerHeight = computed(() => commonStore.clientHeight - 135);

const graphicScale = computed(() =>
  Math.min(containerWidth.value, containerHeight.value)
);

const switcherLeft = computed(
  () =>
    (commonStore.clientWidth +
      (commonStore.showSidebar ? commonStore.sidebarWidth : 0) -
      400 -
      128) /
    2
);
</script>

<style scoped>
.switcher {
  position: fixed;
  z-index: 100;
  top: 55px;
  /* left: calc(50% - 54px); */
  padding: 0;
  text-align: center;
  transition: all 0.2s ease-in-out;
  /* opacity: 0.8; */
  /* transform: scale(0.9); */
  background-color: var(--el-bg-color);
}

/* .switcher:hover {
  opacity: 1;
  transform: scale(1);
} */

.switcher > * {
  margin: 0;
}
</style>
